import styles from './index.module.css'
import React, { useEffect } from 'react'

import { getSession, getLocation } from '../../utils/axiosRequest/api'
import { Toast } from 'antd-mobile'

function Report() {
    const TMap = window.TMap;
    //腾讯地图
    const tencentMap = React.useRef();
    //微信JSSDK
    const wx = React.useRef();


    //[]空数组相当于componentDidMount
    useEffect(() => {
        initData()
        //模拟定位
        const intervalId = setTimeout(function () {
            //addMarker()
        }, 3000); // 延迟时间为5000毫秒（即5秒）
        //返回的函数相当于unmountComponentAtNode
        return () => {
            clearInterval(intervalId);
            if (tencentMap != null) {
                tencentMap.current.destroy();
            }
        }
    }, []);


    function initData() {
        const center = new TMap.LatLng(24.20114351023042, 113.3996004760742)
        tencentMap.current = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 12,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45,    //设置地图旋转角度
            viewMode: '2D', //3D模式
        });
        //去掉缩放按钮
        tencentMap.current.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);

        //当前url,要拿到code换取微信唯一标识
        //处理url->当前网页的URL，不包含#及其后面部分
        const url = window.location.href.split('#')[0]

        //获取js注册配置 当前网页的URL，不包含#及其后面部分
        const params = new Map()
        params.set('hrefUrl', url)
        wx.current = window.wx;
        getSession(params)
            .then(response => {
                const data = response.data
                //const wx = window.wx;
                wx.current.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wxdd2002c0c548a1e0', // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList: ['openLocation', 'getLocation', 'chooseImage', 'uploadImage', 'hideAllNonBaseMenuItem'] // 必填，需要使用的JS接口列表
                });

            })
            .catch(error => {
                console.log("hm2", error.message);
            });
        wx.current.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            wx.current.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                    //逆地理编码
                    const params = new Map()
                    params.set('longitude', longitude)
                    params.set('latitude', latitude)
                    getLocation(params)
                        .then(response => {
                            const data = response.data
                            const addresses = data.result.formatted_addresses.recommend
                            //Toast.show({ content: addresses })
                            addMarker(longitude, latitude, addresses)
                            Toast.show({ content: '定位成功' })
                        })
                        .catch(error => {
                            Toast.show({ content: '逆地理编码失败' })
                        });
                },
                fail: function (res) {
                    Toast.show({ content: '定位失败~' })
                }
            });
            //隐藏所有非基础按钮接口
            wx.current.hideAllNonBaseMenuItem();
        });
    }

    function addMarker(longitude, latitude,addresses) {


        const center = new TMap.LatLng(latitude, longitude)
        //添加marker
        let marker = new TMap.MultiMarker({
            map: tencentMap.current,
            styles: {
                // 点标记样式
                marker: new TMap.MarkerStyle({
                    width: 20, // 样式宽
                    height: 30, // 样式高
                    anchor: { x: 10, y: 30 }, // 描点位置
                }),
            },
            geometries: [
                {
                    id: '1',
                    position: center,
                    properties: {
                        "title": "marker1"
                    }

                },
            ],
        });
        //添加信息窗体
        let infoWindow = new TMap.InfoWindow({
            map: tencentMap.current,
            position: center, //设置信息框位置
            content: addresses, //设置信息框内容
            offset: { x: 0, y: -50 }//设置偏移量，防止遮挡描点
        });
        //平滑移动地图
        tencentMap.current.setCenter(center);
        tencentMap.current.easeTo({ zoom: 17, rotation: 90 }, { duration: 2000 })
    }

    return (
        <div>
            <div className={styles.map_container} id="container" />
        </div>
    )
}

export default Report;
